<template>
    <div class="main-scrollbar">
        <!-- <div class="module">
            <div class="module-header">
                <div class="module-header-title">智能分群</div>
                <div class="module-header-subtitle">
                    上次分群时间：2022/12/12 06:52:09
                    下次自动分群时间：2022/12/13 07:00:00
                </div>
                <div class="module-header-link">使用教程</div>
            </div>
        </div> -->
        <div class="module">
            <div class="module-header module-header-bottom-line">
                <div class="module-header-title">分群概览</div>
                <div class="module-header-subtitle">
                    根据客户数据进行智能分群，想自定义参数设置可在RFM设置中调配
                </div>
                <div class="module-header-button" @click="toRFMSetup">
                    自定义设置
                </div>
            </div>
            <div class="module-grid">
                <div
                    class="module-grid-item"
                    v-for="(item, index) in data"
                    :key="index"
                    @click="toRFMDetail(item)"
                >
                    {{ item.rfmType | formatRFMType }}({{ item.count }})
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "view-rfm",
    data() {
        return {
            data: [],
        };
    },
    mounted() {
        this.getData();
    },
    filters: {
        formatRFMType(rfmType) {
            if (rfmType === 0) {
                return "沉睡客户";
            } else if (rfmType === 1) {
                return "体验客户";
            } else if (rfmType === 2) {
                return "需刺激客户";
            } else if (rfmType === 3) {
                return "潜力客户";
            } else if (rfmType === 4) {
                return "重要挽留客户";
            } else if (rfmType === 5) {
                return "重要发展客户";
            } else if (rfmType === 6) {
                return "重要唤回客户";
            } else if (rfmType === 7) {
                return "高价值客户";
            }
        }
    },
    methods: {
        async getData() {
            const result = await get({
                url: "/admin/user.RealmeritUser/userRfmStatistics",
                params: {}
            });
            this.data = result.row.reverse();
        },
        toRFMSetup() {
            this.$router.push("/rfm-setup");
        },
        toRFMDetail(item) {
            this.$router.push("/rfm-detail?rfmtype=" + item.rfmType);
        }
    }
};
</script>

<style scoped>
.module {
    margin: 20px 0;
    overflow: hidden;
    background-color: #fff;
}

.module-header {
    display: flex;
    align-items: center;
    padding: 20px 0;
    margin: 0 15px;
}

.module-header-bottom-line {
    border-bottom: 1px solid rgb(212, 215, 217);
}

.module-header-title {
    font-size: 18px;
    font-weight: bold;
}

.module-header-subtitle {
    font-size: 14px;
    color: rgb(157, 158, 160);
    margin-left: 20px;
}

.module-header-link {
    font-size: 14px;
    color: rgb(107, 67, 239);
    margin-left: auto;
    cursor: pointer;
}

.module-header-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    border: 1px solid rgb(188, 189, 193);
    color: #000;
    font-size: 14px;
    border-radius: 2px;
    margin-left: auto;
    cursor: pointer;
}

.module-grid {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    height: 600px;
    padding: 10px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
}

.module-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.module-grid-item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 5;
    background-color: rgb(225, 138, 197);
}

.module-grid-item:nth-child(2) {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: rgb(114, 116, 210);
}

.module-grid-item:nth-child(3) {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: rgb(128, 209, 211);
}

.module-grid-item:nth-child(4) {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: rgb(244, 209, 219);
}

.module-grid-item:nth-child(5) {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: rgb(163, 127, 227);
}

.module-grid-item:nth-child(6) {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: rgb(114, 173, 249);
}

.module-grid-item:nth-child(7) {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: rgb(102, 111, 154);
}

.module-grid-item:nth-child(8) {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: rgb(137, 217, 140);
}
</style>